import React, {Component} from 'react';
import { View, Text,StyleSheet,Dimensions,ScrollView,TouchableOpacity } from 'react-native';
import {WhiteSpace,Flex,ActivityIndicator,List,Toast,Carousel,Tabs} from 'antd-mobile-rn';
import Layout from '../components/Layout';
import { post } from '../utils/request';
import SyList from '../components/SyList';
import config from '../config';
import tool from '../utils/tool';
import CImage from '../components/CImage';
import AutoImage from '../components/AutoImage';


export default class Picture extends Component {
    //构造函数
    constructor(props) {
        super(props);
        this.state = {
            loading:false,
            category:[],
            datalist:[],
            selectcategory:0,
            pageCurrent: 1,
            pageSize: 10,
            selectedTab:0,
        };
    }
    //组件加载
    componentDidMount() {
        //document.title="精选图吧-"+config.sitename;
        post("/openapi/getcategory/",{
            category:"pic"
        },(r)=>{
            let cs=[];
            r.data.forEach(c => {
                cs.push({title:c.name,data:c});
            });
            this.setState({
                category:cs,
                selectcategory:cs[0].data.value
            },()=>{
                this.loadData();
            });
           
           
        },(e)=>{
            Toast.fail(e.message,3);
        },(s)=>{
            this.setState({loading:s});
        });
    }

    //组件卸载
    componentWillUnmount() {

    }
    //属性改变
    componentWillReceiveProps(nextProps) {
    }

    loadData=()=> {
        // console.log({
        //     category:2,
        //     subcategory:this.state.selectcategory,
        //     pageindex:this.state.pageCurrent,
        //     pagesize:this.state.pageSize,
        // });
        post("/openapi/getInfoByCategory/",{
            category:2,
            subcategory:this.state.selectcategory,
            pageindex:this.state.pageCurrent,
            pagesize:this.state.pageSize,
        },(r)=>{
            this.setState({
                datalist: this.state.datalist.concat(r.data)
            });
        },(e)=>{
            Toast.fail(e.message,3);
        },(s)=>{
            this.setState({loading:s});
        });
    }

    tabClick=(tab,index)=>{
        this.setState({
            datalist:[],
            selectcategory:tab.data.value,
            selecttab:index,
            pageCurrent:1
        },()=>{ this.loadData();});
       
    };

    listItemClick=(id)=>{
        this.props.navigation.navigate('PictureDetail',{id:id});
    }

    renderRow = (o) => {
        let item = o.item;
        //console.log("图片:"+item.title+" imgurl:"+item.imgurl);
        return (
            <TouchableOpacity key={"img_"+item.id} style={{backgroundColor:"white"}} key={item.id} onPress={()=>{this.listItemClick(item.id)}}  >
                 <Flex style={[st.row,{flex:1,flexDirection:"column",alignItems:"flex-start"}]}>
                    <Flex style={{flex:1,alignSelf:"flex-start"}}>
                        <Text numberOfLines={1} style={st.title}>{item.title}</Text>
                    </Flex>
                    <Flex style={{flex:1,flexDirection:"row"}}>
                        <SyList key={"img_"+item.id+"_list"} horizontal={true}
                                data={item.imgurl.split(',')}
                                renderItem={(o)=>{
                                    let item = o.item;
                                   
                                    if(item=="")
                                        return <View/>
                                    else
                                        return (
                                        <Flex style={{}}>
                                        {/* 内存吃不消 需要图片动态缩放 */}
                                            <CImage key={"img_"+item.id+"_list_"+item}
                                                defaultSource={require('../../static/imgs/image_error_small.png')}
                                                resizeMode={"contain"}
                                                source={{ uri: tool.getimageurl(100,100,0.9,item), cache: 'force-cache' }} 
                                                style={{
                                                width: 100, 
                                                height: 100, 
                                                
                                                }}/>
                                        </Flex>)
                                    }}
                                ItemSeparatorComponent={<View/>}
                            />
                            {/* {item.imgurl.split(',').map((a,i)=>(
                                <View  key={"img_"+item.id+"_"+i} style={{}}>
                                <CImage
                                    resizeMode={"contain"}
                                    source={{ uri: a }} 
                                    style={{
                                    width: 100, 
                                    height: 100, 
                                    }}/>
                                </View>
                            ))} */}
                    </Flex>
                </Flex>
           </TouchableOpacity>
        );
    };

    onEndReached=()=> {
        this.setState({
            pageCurrent: this.state.pageCurrent + 1
        },()=>{this.loadData();});
    }

    render() {
        return (
            <Layout selectedTab={"Picture"} {...this.props}>
                <View style={{height:38}}>
                    <Tabs tabs={this.state.category} initialPage={0} animated={false}  page={this.state.selecttab} onTabClick={this.tabClick}>
                    </Tabs>
                </View>
                <View style={{flex:1}}>
                    <SyList
                            data={this.state.datalist}
                            renderItem={this.renderRow}
                            pageSize={this.state.pageSize}
                            pageCurrent={this.state.pageCurrent}
                            onEndReached={this.onEndReached}
                            refreshing={1}
                            onEndReachedThreshold={0.05}
                            //onEndReachedThreshold={5}
                        />
                    <ActivityIndicator
                        toast
                        size="large"
                        text="数据加载中..."
                        animating={this.state.loading}
                    />
                </View>
            </Layout>
        );
    }
    
}

const st = StyleSheet.create({
    row:{
        marginLeft:5,
        marginRight:5,
    },
    title:{
        lineHeight: 25,
        fontSize: 17,
        backgroundColor: "white",
        color:"black"
    },
  });
